<template>
    <div>
<h2>显示</h2>
酒店名：<input type="text" v-model="TiaoJian.name">
户型结构：
                <select v-model="TiaoJian.Type">
                    <option value="">请选择</option>
                    <option value="两居室">两居室</option>
                    <option value="三居室">三居室</option>
                    <option value="四居室">四居室</option>
                    <option value="五居室">五居室</option>
                </select>
                
<input type="button" value="查询" @click="ChaXun">
<table class="table">
    <thead>
        <tr>
            <td>id</td>
            <td>房间名</td>
            <td>建筑面积</td>
            <td>套内面积</td>
            <td>单价</td>
            <td>户型结构</td>
            <td>img</td>
            <td>看房时间</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody>
        <tr v-for="m in data">
            <td>{{ m.id }}</td>
            <td>{{ m.name }}</td>
            <td>{{ m.jianZhu }}</td>
            <td>{{ m.taoNie }}</td>
            <td>{{ m.price }}</td>
            <td>{{ m.type}}</td>
            <td>{{ m.img }}</td>
            <td>{{ m.createDate.substring(0,10) }}</td>
            <td>
                <input type="button" value="删除" @click="Del(m.id)">
                <input type="button" value="查看" @click="XiangQing(m.id)">
                <input type="button" value="修改" @click="Update(m.id)">
            </td>
        </tr>
    </tbody>
</table>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router=useRouter();

onMounted(()=>{
    GetRoom();
})

const ChaXun=()=>{
    GetRoom();
}
const Del=(vid:any)=>{
    if(!confirm("确认删除吗?")){
        return;
    }
    axios.delete("https://localhost:7154/api/Room/DelRoom",{params:{id:vid}}).then(res=>{
        if(res.data>0){
            alert("删除成功");
            GetRoom();
        }
        else{
            alert("删除失败");
        }
    })
}

const XiangQing=(vid:any)=>{
    router.push({path:'/XiangQing',query:{id:vid}});
}


const data=ref([{
    "id": 1,
    "name": "瑞特",
    "type": "一室一厅",
    "jianZhu": 130.55,
    "taoNie": 126.9,
    "price": 29990,
    "img": "string",
    "createDate": ""
}])

const TiaoJian=ref({
    name:'',
    Type:''
})

const GetRoom=()=>{
    axios.get("https://localhost:7154/api/Room/GetRoom",{params:TiaoJian.value}).then(res=>{
        data.value=res.data;
    })
}

const Update=(vid:any)=>{
    router.push({path:'/UpDate',query:{id:vid}});
}
</script>

<style scoped>

</style>